<template>
  <view class="p-lr-20 relative">
    <u-navbar title="选择人员" :background="{ backgroundColor:'#9CE0FF'}" :border-bottom="false" title-color="#000" title-size="37" />
    <u-checkbox-group class="w-full" max="3" @change="change" size="40">
      <view class="flex justify-center w-full">
        <empty-icon v-if="!engineerList.length && !loading"></empty-icon>
      </view>
      <view class="flex w-full flex-column" id="container" :style="{minHeight:`calc(100vh - ${top}px - 244rpx)`}">
        <view v-for="(item, index) in engineerList" :key="index" class="h-142 flex align-center border-bottom-CCCCCC">
          <check-box class="w-full h-full flex ml-20" :name="item.staffId" v-model="item.checked" :disabled="false" shape="circle" active-color="#19BE6B">
            <view class="ml-55">
              <text class="flex1 font-bold fz-32 text-ellipsis-2"> {{ item.staffName }} </text>
            </view>
          </check-box>
        </view>
      </view>
    </u-checkbox-group>
    <view class="flex align-center justify-end h-244 sticky bottom0 bg-fff" v-if="engineerList.length">
      <view class="h-60 w-120 br-5 border-2D8CF0 fz-28 color-2D8CF0 lh-60 text-center mr-50" @tap="back">
        <text>取消</text>
      </view>
      <view class="h-60 w-120 br-5 border-2D8CF0 fz-28 color-fff lh-60 text-center bg-2D8CF0 mr-50" @tap="chooseEngineer">
        <text>确定</text>
      </view>
    </view>

    <!--未选择人员模态框-->
    <u-modal border-radius="20" :show-confirm-button="false" :show-title="false" mask-close-able v-model="emptyModel">
      <view class="h-150 flex align-center justify-center font-bold fz-30">
        <image class="mr-20 w-38 h-38" src="@/static/images/mine/error.png"></image>
        <text>请选择人员进行分配</text>
      </view>
    </u-modal>

    <!--确认选择人员模态框-->
    <u-modal v-model="confirmModel" :show-confirm-button="false" :show-title="false" border-radius="20"
             mask-close-able>
      <view class="flex flex-column align-center p-lr-20">
        <view class="border-bottom-CCCCCC w-full text-center lh-116 fz-40 font-bold color-333333 font-bold">
          <text>选择人员</text>
        </view>
        <view class="border-bottom-CCCCCC w-full p-lr-20 flex justify-between lh-102 fz-30" v-for="(item ,index) in staffList" :key="index">
          <text>{{item.staffNo}}</text>
          <text>{{item.staffName}}</text>
        </view>


        <view class="flex align-center justify-center mt-60 mb-50">
          <view class="border-2D8CF0 w-120 h-60 border-box color-2D8CF0 fz-28 text-center lh-60 br-5 mr-50" @tap="confirmModel = false">
            <text>取消</text>
          </view>
          <view class="bg-2D8CF0 w-120 h-60 color-fff fz-28 text-center lh-60 br-5" @tap="confirm">
            <text>确定</text>
          </view>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import CheckBox from "@/components/CheckBox/CheckBox";
import getNavBarHeight from "@/mixins/getNavBarHeight";
import { option } from "@/api/basic/staff";
import { assignEngineer, assignEngineerBatch } from "@/api/inspection/task";
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";

export default {
  name: "choose-worker",
  components: {EmptyIcon, CheckBox},
  mixins:[getNavBarHeight],
  data(){
    return {
      //工程师列表
      engineerList:[],
      //分配人员Id列表
      staffIds:[],
      //分配人员列表
      staffList:[],
      //工单信息
      workOrderId: '',
      hospitalId: '',
      emptyModel: false,
      confirmModel: false,
      byBatch: false,
      workOrderIdList: [],
      loading: true,
    }
  },
  onLoad(options){
    this.byBatch = options.byBatch === '1'
    this.workOrderId = options.workOrderId
    this.hospitalId = options.hospitalId
    this.workOrderIdList = options.workOrderIdList ? options.workOrderIdList.split(',') : []
  },
  onShow(){
    this.init()
  },
  methods:{
    init(){
      this.loading = true
      Promise.all([option({hospitalId: this.hospitalId, postCode: 'manager'}),option({hospitalId: this.hospitalId, postCode: 'engineer'})]).then(res => {
        this.engineerList = res.reduce((pre, next) => {
          pre.push(...next.data)
          return pre
        }, [])
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        this.loading = false
      })
    },
    change(detail){
      this.staffIds = detail
    },
    back(){
      uni.navigateBack({
        delta: 1
      });
    },
    chooseEngineer(){
      if( this.staffIds.length ){
        this.staffList = this.engineerList.filter(item => {
          return this.staffIds.find(idsItem => {
            return item.staffId ===  idsItem
          })
        })
        this.confirmModel = true
      }
      else{
        this.emptyModel = true
      }
    },
    confirm(){
      const staffIds = this.staffIds.reduce((pre,next) => {
        pre = `${pre},${next}`
        return pre
      })
      //非批量分配工程师
      if(!this.byBatch){
        const data = {workOrderId: this.workOrderId,staffIds,status:1,responsibleStaffIds:staffIds}
        assignEngineer(data).then(res => {
          if(res.code == 200){
            this.confirmModel = false
            this.$tab.switchTab('/pages/tabbar/work/work')
          }
        })
      }
      //批量分配工程师
      else{
        const data = {workOrderIdList: this.workOrderIdList,staffIds,status:1,responsibleStaffIds:staffIds}
        assignEngineerBatch(data).then(res => {
          if(res.code == 200){
            this.confirmModel = false
            this.$tab.switchTab('/pages/tabbar/work/work')
          }
        })
      }
    },
  },
  options: {styleIsolation: "shared"},
}
</script>
<style lang="scss">
page{
  background-color: #FFFFFF;
}
</style>
<style lang="scss" scoped>
/deep/ .u-checkbox{
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
}
/deep/ .u-checkbox__label{
  display: flex;
  align-items: center;
  height: 100% !important;
  flex: 1 !important;
}
</style>
